<template>
  <div :class="isShow?'':'hide'">
    <TopCont :classInfo="classInfo" :classProfile="classProfile" :classCommittee="classCommittee" ref="vMarqueeTextDown" />
    <div class="line_02">
      <div class="c-left">
        <RulePerf ref="vRulePerf" :signInfo="signInfo" :rulePerf="rulePerf"></RulePerf>
        <div class="c-down">
          <DutyInfo :dutyInfo="dutyInfo"></DutyInfo>
          <Curriculums :curriculums="curriculums"></Curriculums>
        </div>
      </div>
      <div class="c-right">
        <BeautyJunior ref="vBeautyJunior" :adonises="adonises"></BeautyJunior>
      </div>
    </div>
    <div class="line_03">
      <ASTM ref="vASTM" :dataASTM="dataASTM" @goList="type=>{$emit('goList', type)}"></ASTM>
    </div>
  </div>
</template>

<script>
import TopCont from './TopCont'
import RulePerf from './RulePerf'
import BeautyJunior from './BeautyJunior'
import DutyInfo from './DutyInfo'
import Curriculums from './Curriculums'
import ASTM from './ASTM'
export default {
  props: {
    isShow: Boolean,

    classInfo: Object,
    classProfile: Object,
    classCommittee: Array,
    signInfo: Object, // 今日签到
    rulePerf: Array, // 今日表现
    dutyInfo: Object, // 今日值日
    curriculums: Object, // 今日明日课表
    adonises: Object, // 班级美少年
    dataASTM: Object
  },
  components: {
    TopCont,
    RulePerf,
    BeautyJunior,
    DutyInfo,
    Curriculums,
    ASTM
  },
  watch: {
    isShow (isShow) {
      let { vMarqueeTextDown, vRulePerf, vASTM, vBeautyJunior } = this.$refs
      if (isShow) {
        vMarqueeTextDown.start()
        vRulePerf.timer.start()
        vASTM.timer.start()
        vBeautyJunior.timer.start()
      } else {
        vMarqueeTextDown.stop()
        vRulePerf.timer.stop()
        vASTM.timer.stop()
        vBeautyJunior.timer.stop()
      }
    }
  }
}
</script>

<style scoped>
.line_02 {
  width: 900px;
  height: 480px;
  margin: 0 20px 20px;
}
.hide {
  opacity: 0;
  pointer-events: none;
}

.c-left {
  width: 470px;
  float: left;
}

.c-down {
  width: 560px;
  height: 275px;
}

.c-right {
  width: 320px;
  height: 484px;
  border-left: dashed 1px #ddd;
  float: right;
}

.line_03 {
  width: 860px;
  height: auto;
  margin-left: 35px;

  clear: both;
}
</style>

